<template>
  <div class="search">
    <div class="searchItems" v-for="item in searchItems">
        <div class="item">
            <div class="label">
                {{ item.label }}:
            </div>
            <div class="bar">
                <div v-if="item.type=='single-select'">
                    <el-select 
                        ref="selectRef"
                        v-model="selectedValues[item.value]"
                        filterable
                        placeholder="Select"
                        @change="handleSelectChange(item)"
                        clearable
                        highlight-current-row
                        >
                        <el-option
                            v-for="i in item.options"
                            :key="i.value"
                            :label="i.value"
                            :value="i.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>
    </div>
    <div class="buttons">
        <el-button
            class="buttonItem"
            type="info"
            style="margin: 20px;" 
            @click="searchFunc"
            >Search
        </el-button>
        <div v-if="props.showDownload">
            <el-button
                class="buttonItem"
                type="info"
                style="margin: 20px;"
                >Download
            </el-button>
        </div>
    </div>
  </div>
</template>

<script lang="ts" setup props="props" name="Search">
    import {onMounted, reactive, ref, watch} from 'vue'
    import { ElMessage } from 'element-plus'
    import { post } from '../axios/api';

    let selectedValues: any = ref({})
    let options:any = reactive({})
    const props = defineProps(['searchItems', 'updateTable', 'downloadData', 'handleOption', 'showDownload', 'initSelectedValues'])

    const handleSelectChange = async (item: any) => {
        if (!selectedValues.value[item.value]) {
            props.handleOption(props.searchItems)
        } else {
            for (let ele of props.searchItems) {
                if (ele.value == item.value) {
                    continue
                }
                let res:any = {}
                let data = {
                    option: ele.value,
                    params: {
                        [item.value]: selectedValues.value[item.value]
                    }
                }
                try {
                    res = await post('/get_options/', data)
                } catch (error:any) {
                    ElMessage({
                        message: error,
                        type: 'error',
                    })
                }
                if (res && res.success) {
                    ele.options = res.data
                }
            }
        }
    }

    function searchFunc() {
        props.updateTable(selectedValues.value)
    }


    onMounted(() => {
        props.searchItems.forEach(({label, value} : {label: string, value: string}) => {
            selectedValues.value[value] = ''
            options[value] = {}
        })
        if (props.initSelectedValues && props.initSelectedValues.experiment_type) {
            selectedValues.value['experiment_type'] = props.initSelectedValues.experiment_type
        }
        if (props.initSelectedValues && props.initSelectedValues.sample_type) {
            selectedValues.value['sample_type'] = props.initSelectedValues.sample_type
        }
    })

</script>

<style scoped>
    .search {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .searchItems{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin: 20px;
    }

    .buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
    }
    .item {
        /* display: flex; */
        width: 100%;
    }
    .label {
        width: 100%;
        margin-bottom: 10px;
    }
    .bar {
        width: 100%;
    }
    /* .el-button+.el-button { 
        margin-left: 0; 
    } */
</style>